<template>
  <div class="main-tradebox">

    <div
      v-if="hasdata"
    >
        <div class="top_nav" 
        :data="millEarningsData.slice((tableData.page - 1) * tableData.limit, tableData.limit * tableData.page)"
        v-for="(item,index) in millEarningsData" :key="index"
        >
        <div class="ItemData"> 
          <div>
            <p>{{item.name}}</p>
            <p>{{item.wdate}}</p>
          </div>
          <div>
            <p>收益</p>
            <p v-if="item.number>0">+{{item.number}}{{item.coin}}</p>
            <p v-if="item.number<0">-{{item.number}}{{item.coin}}</p>
          </div>
        </div>
        </div>


        <!-- 分页 -->
        <div style="display: flex; align-items: center">
          <el-pagination
            class="pagination"
            background
            :page-size="tableData.limit"
            layout="prev, pager, next"
            @current-change="changecurrent"
            :total="total"
          >
          </el-pagination>
        </div>
    </div>

    <div v-else class="nodata">
        暂无数据
    </div>
     
   </div>
</template>
<script>
export default {
    data(){
      return{
          tableData:{
            page:1,
            limit:10,
          },
          millEarningsData:null,
          total:null,
          hasdata:false
      }
    },
    mounted(){
    this.millEarnings()
    },
    methods:{
      millEarnings(){
          return this.request(this.api.millEarnings,this.tableData).then(res=>{
              if(res.code==0){
                  console.log(res.data.length)
                  this.millEarningsData = res.data,
                  this.total = res.data.length
                  if(res.data.length){
                    this.hasdata = true
                  }
              }
          })
      },

      changecurrent(current) {
        this.tableData.page = current;
      },

    }
   
}
</script>
<style lang="scss" scoped>
 .main-tradebox{
   height: 500px;
    min-height: calc(100% - 294px);
  padding: 0px 0;
  // width: 77%;
  // margin: 0 auto;
    width: 100%;
    .top_nav{
        width: 100%;
        padding:0 150px;
        box-sizing: border-box;
    }
    .ItemData{
      box-sizing: border-box;
      padding: 20px 20px;
      margin: 40px;
      height: 104px;
      border-bottom: 1px solid #dddddd;
      display: flex;
      justify-content: space-between;
      div:nth-child(1){
        p:nth-child(1){
          font-size: 16px;
          color: black;
          font-weight: bold;
          height: 32px;
          line-height: 32px;
        }
        p:nth-child(2){
          font-size: 14px;
          color: #b6b6b6;
          height: 32px;
          line-height: 32px;
        }
      }
        div:nth-child(2){
        p:nth-child(1){
          font-size: 14px;
          color: #a0a0a0;
          height: 32px;
          line-height: 32px;
        }
         p:nth-child(2){
           font-size:16px ;
           font-weight: bold;
           color: #e44e5e;
          height: 32px;
          line-height: 32px;
          text-align: center;
        }
      }

    }
    .el-table__body{
        .el-table__row{
            height: 100px !important;
            
        }
    }

    .pagination {
      margin: 57px auto 67px;
    }

    .nodata{
      border-top: 1px solid #dddddd;
      margin-top: 40px;
      padding-top: 30px;
      box-sizing: border-box;
      text-align: center;
      font-size: 14px;
    }
 
}
</style>
  
